<template>
  <div class="me">
    <div class="nav">
      <div class="nav_img"></div>
      <div v-if="show">
        <p id="dlsize">
          <a @click="goto">未登陆</a> / <a @click="goto">注册</a>
        </p>
      </div>
      <div v-else-if="show2">
        <p class="dlsize">{{ userdata.username }}</p>
      </div>
    </div>
    <van-cell title="我的订单" is-link value="全部订单" to="/order" />
    <van-grid clickable :column-num="3">
      <van-grid-item icon="bill-o" text="代付款" to="/" />
      <van-grid-item icon="coupon-o" text="优惠价" to="/" />
      <van-grid-item icon="like-o" text="收藏" url="/" />
    </van-grid>
    <div class="midd">
      <van-cell title="会员中心" to="/member" is-link />
      <van-cell title="收货地址" to="/shiptwo" is-link />
    </div>
    <div class="middone">
      <van-cell title="我的优惠" to="/discounts" is-link />
      <van-cell title="我的意见" to="/opinion" is-link />
    </div>
    <div class="middtwo">
      <van-cell title="浏览记录" to="/record" is-link />
    </div>
    <div class="middfour">
      <van-cell title="我的名片" to="/card" is-link />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    userdata: JSON.parse(sessionStorage.user || '[]'),
    show: true,
    show2: false
  }),
  methods: {
    goto() {
      this.$router.push('/login')
      this.change()
    },
    created() {

    },
    change() {
      console.log(this.userdata.username)
      if (this.userdata.username) {
        this.show = false
        this.show2 = true
      } else {
        this.show = true
        this.show2 = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.me {
  background-color: #f5f5f5;
  .nav {
    height: 3rem;
    padding: 1rem 0;
    background-color: #f37d0f;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    .nav_img {
      margin: 0 0.5rem 0 1rem;
      width: 3rem;
      height: 3rem;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 100%;
      border: 0.1875rem solid hsla(0, 0%, 100%, 0.4);
      text-align: center;
    }
    #dlsize {
      font-size: 14px;
      color: #fff;
      text-align: left;
    }
    .dlsize {
      font-size: 14px;
      color: #fff;
      text-align: left;
    }
  }
  .van-cell--clickable {
    background-color: #fff;
    height: 3.0625rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.54);
    display: flex;
    align-items: center;
    padding: 0 0 0 1.75rem;
    .van-cell__title {
      font-size: 15px;
      color: rgba(0, 0, 0, 0.87);
    }
    .van-cell__value {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.87);
    }
  }
  .van-grid-item__text {
    color: #00000;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-all;
  }
  .midd {
    margin-top: 0.9375rem;
  }
  .middone {
    margin-top: 0.9375rem;
  }
  .middtwo {
    margin-top: 0.9375rem;
  }
  .middfour {
    margin-top: 0.9375rem;
  }
}
</style>
